<template>
	<view class="planttool">
		<view class="search">
			<text v-if="suousuos" class="iconfont icon-sousuo sousuos"></text>
			<input type="text" class="iconfont" v-model="keywords" :placeholder="icon" @blur="playSuosuo()" @focus="disSuosuo()"
			 @input="seakeyword(e)" /><text class="cancels" @click="cancel">取消</text>
		</view>
		<view class="tabbar">
			<view v-for="(item,index) in tabbars" :key="item.id" @click="selecttabbar(index)" :class="selectAction == index ? 'selectStatus': ''">
				<text>
					{{item}}
					<text v-if="index == 1" class="iconfont icon-xiajiantou asc" :class="sc1 == 0 && selectAction == 1 ? 'status10': ''"></text>
					<text v-if="index == 1" class="iconfont icon-shangjiantou desc" :class="sc1 == 1 && selectAction == 1 ? 'status10': ''"></text>
					<text v-if="index == 2" class="iconfont icon-xiajiantou asc" :class="sc2 == 0 || selectAction == 2 ? 'status20': ''"></text>
					<text v-if="index == 2" class="iconfont icon-shangjiantou  desc" :class="sc2 == 1 || selectAction == 2 ? 'status20': ''"></text>
				</text>
			</view>
		</view>

		<view class="contexts">
			<view class="list" v-for="(item,index) in list" :key="item.id" @click="jumpProjectDetails(index)">
				<view class="imgs">
					<image :src="item.image_url" mode="scaleToFill" style="width: 190rpx; height: 190rpx;"></image>
				</view>
				<view class="right">
					<view class="title">
						<text>{{item.items_title}}</text>
					</view>
					<view class="neme">
						<text>{{item.service_title}}</text>
						<view class="nemeLatit">
							<image src="/static/image/qita/positions.png" mode="scaleToFill" style="width: 16rpx; height: 21rpx;"></image>
							<!-- (this.juli / 1000).toFixed(2) -->
							<!-- (item.latitudesAndLongitudes / 1000).toFixed(2) -->
							<text>{{item.latitudesAndLongitudes}} m</text>
							<!-- <text>{{(item.latitudesAndLongitudes / 1000).toFixed(2)}} km</text> -->
						</view>
					</view>
					<view class="price">
						<text>￥{{parseInt(item.price)}}</text>
						<text>预约数：<text>{{item.sub_num}}</text></text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// 计算经纬度的方法
	import mapNumberUtil from "@/uitl/mapNumberUtil.js";
	export default {
		onLoad(options) {
			this.id = options.id;
			console.log(this.id);
			uni.setNavigationBarTitle({
				title: options.title
			});
			this.price = "";
			this.getList(this.keywords, this.id);
		},
		data() {
			return {
				// tabbars: ["综合排序", "价格", "距离"],
				tabbars: ["综合排序", "价格"],
				selectAction: 0,
				// 小按钮
				sc1: 0,
				sc2: 0,
				keywords: "",
				list: null,
				id: null,
				price: "asc",
				// 传递页面数
				pageSize: 6,
				// 页面总数
				countPages: null,
				// 当前页面数
				page: 1,
				icon: '点击搜索项目',
				// 搜索小图标
				suousuos: true,
			};
		},

		methods: {
			jumpProjectDetails(index) {
				let data = this.list.filter((value, key, arr) => {
					if (index == key) {
						return value;
					};
				});
				uni.navigateTo({
					url: `../projectDetails/projectDetails?id=${this.list[index].id}&juli=${this.list[index].latitudesAndLongitudes}`
				})
			},
			async getList(keyword = "", id, price = "") {
				let path =
					`Pagelist/getIconList?pageSize=${this.pageSize}&page=${this.page}&id=${id}&keyword=${keyword}&price=${price}`;
				let res = await this.$myrequest({
					url: path
				});
				console.log(`获取数据列表`)
				console.log(res);
				console.log(`获取数据列表`)
				let latitudes = this.$store.state.longitudeAndLatitude.latitude;
				let longitudes = this.$store.state.longitudeAndLatitude.longitude;

				this.countPages = res.data.countPage;
				this.list = res.data.data.map((value, key, arr) => {
					let lat2 = parseFloat(value.latitude);
					let long2 = parseFloat(value.longitude);
					// 使用~~取整数；
					return {
						"id": value.id,
						"image_url": value.image_url,
						"latitudesAndLongitudes": ~~mapNumberUtil(latitudes, longitudes, lat2, long2),
						"service_title": value.service_title,
						"reserve_num": value.reserve_num,
						"price": value.price,
						"sub_num": value.sub_num,
						"items_title": value.items_title
					};
				});
			},

			seakeyword(e) {
				this.getList(this.keywords, this.id);
			},
			disSuosuo() {
				this.suousuos = false;
			},
			playSuosuo() {
				this.suousuos = true;
			},
			sorts() {
				if (this.price == "asc") {
					this.price = "desc";
				} else {
					this.price = "asc";
				};
				this.getList(this.keywords, this.id, this.price);
			},
			cancel() {
				// this.keywords = "";
				this.getList("", this.id);
			},
			selecttabbar(index) {
				this.page = 1;
				this.selectAction = index;
				if (index == 1) {
					console.log(`价格`)

					if (this.sc1 == 0) {
						this.sc1 = 1;
					} else {
						this.sc1 = 0;
					};
					this.sorts();
				} else if (index == 2) {
					if (this.sc2 == 0) {
						this.sc2 = 1;
					} else {
						this.sc2 = 0;
					};
				} else if (index == 0) {
					this.getList(this.keywords, this.id);
				}
			},
			// 滚动获取数据
			async reachBottom() {
				this.page = ++this.page;
				console.log(`pagesize`,this.pageSize)
				if (this.page <= this.countPages) {
					let path =
						`Pagelist/getIconList?pageSize=${this.pageSize}&page=${this.page}&id=${this.id}&price=${this.price}`;
					let res = await this.$myrequest({
						url: path
					});
					let latitudes = this.$store.state.longitudeAndLatitude.latitude;
					let longitudes = this.$store.state.longitudeAndLatitude.longitude;
					
					let xinshuju = res.data.data.map((value, key, arr) => {
						let lat2 = parseFloat(value.latitude);
						let long2 = parseFloat(value.longitude);
						// 使用~~取整数；
						return {
							"id": value.id,
							"image_url": value.image_url,
							"latitudesAndLongitudes": ~~mapNumberUtil(latitudes, longitudes, lat2, long2),
							"service_title": value.service_title,
							"reserve_num": value.reserve_num,
							"price": value.price,
							"sub_num": value.sub_num,
							"items_title": value.items_title
						};
					});				
					console.log(`==========`)
					console.log(xinshuju);
					console.log(`----------`)
					this.list = this.list.concat(xinshuju);
				};
			},
		},
		onReachBottom() {
			this.reachBottom();
		},

	}
</script>

<style lang="scss">
	@import "../../common/icon.css";

	page {
		width: 100%;
		height: 100%;
		background-color: #F5F5F5;
	}

	.search {
		@include shuipingchuijuzhong;
		background-color: #FFFFFF;
		padding-top: 20rpx;
		position: relative;

		>input {
			width: 525rpx;
			height: 60rpx;
			padding-left: 65rpx;
			border: 2rpx solid rgba(242, 243, 245, 1);
			background-color: rgba(242, 243, 245, 1);
			border-radius: 30px;
		}

		.cancels {
			margin-left: 40rpx;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: rgba(128, 128, 128, 1);
			line-height: 30px;
		}

		.sousuos {
			position: absolute;
			top: 25rpx;
			left: 60rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #999999;
		}
	}

	.tabbar {
		width: 750rpx;
		background-color: #FFFFFF;
		display: flex;

		>view {
			flex: 1;
			height: 80rpx;
			@include shuipingchuijuzhong;

			>text {
				position: relative;
			}
		}

	}

	.contexts {
		padding: 30rpx 30rpx 0rpx;


		.list {
			background-color: #FFFFFF;
			border-radius: 20rpx;
			margin-bottom: 20rpx;
			display: flex;
			align-items: center;
			padding: 20rpx;

			.imgs {
				width: 190rpx;
				height: 190rpx;
			}

			.right {
				margin-left: 20rpx;
				display: inline-block;
				width: 100%;

				.title {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: rgba(0, 0, 0, 1);
				}

				.neme {
					display: flex;
					@include chuizhilianduan;

					text {
						color: #999999;
					}

					.nemeLatit {
						display: flex;
						justify-content: flex-end;
						align-items: center;

						image {
							vertical-align: middle;
							margin-left: 45rpx;
						}

						>text {
							margin-left: 10rpx;
						}
					}
				}

				.price {
					@include chuizhilianduan;

					>text {
						&:first-of-type {
							color: #FF3A25;
						}

						&:last-of-type {
							color: #999999;

							text {
								color: #2DD1BC;
							}
						}
					}
				}
			}
		}
	}

	// 被选中的状态
	.selectStatus {
		color: rgba(45, 209, 188, 1) !important;
	}

	.asc,
	.desc {
		position: absolute;
		right: -30rpx;
		font-size: 25rpx;
		color: #C2C2C2;
	}

	.desc {
		top: -3rpx;
	}

	.asc {
		bottom: -3rpx;
	}

	.status10 {
		color: #2DD1BC !important;
	}

	.status20 {
		color: #2DD1BC !important;
	}
</style>
